<template>
	<view class="wait-pay page">
		<scroll-view :scroll-top="scrollTop" style="height:100vh; " scroll-y="true" show-scrollbar="true" @scrolltoupper="upper"
			@scrolltolower="lower" @scroll="scroll">
			<view class="order-list">
				<view v-for="(order, index) in waitPayOrders" :key="index" class="order-item">
					<view class="order-header ">
						<image class="product-image"
							src="http://img06.jiuxian.com/2024/0111/17a8113edc3c46cf91261b1c29e574135.jpg"
							mode="aspectFill"></image>
						<view class="flex-container flex-column">
							<text class="wiName">{{order.w_name}}</text>
							<text class="amount">${{parseFloat(order.price*order.quantity).toFixed(2) }}</text>
						</view>

					</view>
					<view class="order-info">
						<text class="order-quantity">x{{order.quantity}}</text>
						<text class="order-status" style="margin-right: 1rem;">{{order.status}}</text>

						<button class="pay-button" @click="payOrder(order.id)">立即支付</button>
					</view>
				</view>
			</view>
			<view v-if="waitPayOrders.length === 0" class="no-order">
				<text>暂无待付款订单</text>
			</view>
		</scroll-view>
		<u-back-top top="400" icon="arrow-up" :right="backTopData.right" :customStyle="backTopData.customStyle"
			:bottom="backTopData.bottom" :icon="backTopData.icon" :mode="backTopData.mode"
			:iconStyle="backTopData.iconStyle" :duration="backTopData.duration" :scrollTop="scrollTop"
			@click="backToTop()"></u-back-top>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';

	export default {
		data() {
			return {
				status: "待付款",
				waitPayOrders: [

				],
				currentPage: 1, // 当前页数
				totalPage: 1, // 总页数
				scrollTop: 0,
				backTopData: {
					mode: 'circle',
					icon: 'arrow-upward',
					bottom: 100,
					customStyle: {
						backgroundColor: '#cecece',
					},
					iconStyle: {
						color: "#ffffff",
					},
					right: 20,
					duration: 300
				},
			};
		},
		created() {
			this.getStatus()

		},
		computed: {
			...mapGetters(['userInfo']),
			userId() {
				return this.userInfo ? this.userInfo.uid : null;
			}
		},
		methods: {
			upper() {},
			async lower() {
				console.log("jdjfkjkdjf");
				if (this.currentPage < this.totalPage) {
					this.currentPage++;

					await this.getStatus();
				}
			},
			scroll(e) {
				console.log(e);
				this.scrollTop = e.detail.scrollTop;
			},
			backToTop() {
				this.scrollTop = 0
			},
			payOrder(index) {
				// 处理支付逻辑
				uni.redirectTo({
					url: `/pages/tabBar/payment/payment?id=${index}`
				})
			},

			async getStatus() {

				const param = {
					status: this.status,
					userId: this.userId,
					current: this.currentPage,
					size: 10
				}
				const res = await this.$request.get('/system/logistics-order/getByStatus', param)
				console.log(res);
				if (res.code === 200) {

					this.waitPayOrders = this.waitPayOrders.concat(res.data.list.records)
					this.totalPage = res.data.list.pages;
				} else {

				}
			}
		},
	};
</script>

<style lang="scss" scoped>
	.wait-pay {
		padding: 0px;
	}

	.order-list {
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		overflow: hidden;
	}

	.order-item {
		border-bottom: 1px solid #eee;
		padding: 16px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.product-image {
		width: 60px;
		height: 60px;
		border-radius: 4px;
		margin-right: 10px;
	}

	.order-header {
		display: flex;
		align-items: center;
	}

	.order-number {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin-right: 10px;
	}

	.order-status {
		font-size: 14px;
		color: #ff6600;
	}

	.order-info {
		display: flex;
		align-items: center;

		.order-quantity {
			padding-right: 1rem;
			color: #777c7c;
		}
	}

	.amount {
		font-size: 18px;
		font-weight: bold;
		color: #ff6600;
		margin-right: 10px;
	}

	.pay-button {
		background-color: #fd360e;
		color: #fff;
		border: none;
		border-radius: 2rem;
		padding: 0px 9px;
		font-size: 10px;
		cursor: pointer;
	}

	.no-order {
		margin-top: 20px;
		text-align: center;
		color: #999;
	}
</style>